<template>
  <el-card style="width: 25%;float: left;margin-right: 20px;">
    <template #header>
      <span>个人信息</span>
    </template>
    <BaseInf/>
  </el-card>
  <el-card style="width: 70%;">
    <template #header>
      <span>基本资料</span>
    </template>

    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="基本资料" name="first">
        <Personal/>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="second">
        <EditPassword/>
      </el-tab-pane>
    </el-tabs>
  </el-card>

</template>

<script setup>

import {ref} from "vue";
import BaseInf from "../Individual/baseInfor/BaseInf.vue";
import Personal from "../Individual/baseInfor/Personal.vue";
import EditPassword from "../Individual/baseInfor/EditPassword.vue";

const activeName = ref("first");

</script>
<style scoped>
.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #eee;
}

</style>